import AlertFill from "@/assets/image/icons/alert-fill.svg";
import { StyleViewDocument } from "@/components/common-styled";
import CustomModal from "@/components/customModal";
import { getUserInfo } from "@/services/identity-verification";
import { getUser } from "@/services/user";
import useStore from "@/store/configStore";
import userStore from "@/store/userStore";
import { Card, List } from "antd";
import { useEffect, useState } from "react";
import styled from "styled-components";
import { history, useLocation } from "umi";
import Ballot from "./ballot";
import Benefits from "./benefits-of-our-services";
import HomeAnnouncements from "./home-announcements";
import HomeImg from "./home-img";
import HowToRegister from "./how-to-register";

const StyledTitle = styled("div")`
  font-family: Roboto;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  text-align: left;
  color: #202020;
  margin-left: 16px;
`;

const StyledSpanDot = styled("span")`
  color: #998065;
  font-size: 30px;
  margin-right: 12px;
  line-height: 24px;
`;

export const DownloadTemplate = styled(StyleViewDocument)`
  font-size: 16px;
  margin-left: 16px;
  &:hover {
    cursor: pointer;
  }
`;

const StyledList: React.CSSProperties = {
  backgroundColor: "#f7f5f1",
  borderRadius: "12px",
  padding: "24px",
  width: "100%",
  textAlign: "left",
  paddingTop: "0",
  paddingBottom: "16px",
  fontFamily: "Roboto",
  fontWeight: "400",
  fontSize: "16px",
  lineHeight: "24px",
};
export default function HomePage() {
  const { login, logoutFail, isLoggedIn } = useStore();
  const {
    updateUserId,
    updateIdentityData,
    updateLpnData,
    updateBookingData,
    checkPendingStatus,
    updateUserStatus,
    redDotVisible,
    // lpnData,
  } = userStore();
  // console.log(redDotVisible, "checkPendingStatus");
  const baseUrl = process.env.BASE_URL;
  console.log(baseUrl, "baseUrl");
  // console.log(redDotVisible, "redDotVisible");

  const location = useLocation();
  // 获取查询参数
  const queryParams = new URLSearchParams(location.search);
  //LPN 弹框
  const isShowLPNModal = queryParams.get("isShowLPNModal");
  const LPN = queryParams.get("LPN");
  const [isModalOpenDisabled, setIsModalOpenDisabled] = useState(false);
  const [isModalOpenLPN, setIsModalOpenLPN] = useState(false);
  if (isShowLPNModal && LPN === "0") {
    history.push("/login");
  }
  const handleOnOk = () => {
    setIsModalOpenLPN(false);
    login("");
    history.push("/register/details");
  };
  const handleOnCancel = () => {
    setIsModalOpenLPN(false);
  };

  const handleOkDisabled = () => {
    setIsModalOpenDisabled(false);
  };

  useEffect(() => {
    getUser().then((data) => {
      console.log(data, "datauser");
    });
    // console.log("22222222222222");
    getUserInfo({
      hkiaId: "002",
    })
      .then((data) => {
        //@ts-ignore
        if (data.code === 200) {
          //@ts-ignore
          updateUserId(data.data.userId);
          //@ts-ignore
          updateIdentityData(data.data.identityData);
          //@ts-ignore
          updateLpnData(data.data.lpnData);
          //@ts-ignore
          updateBookingData(data.data.bookingData);
          //@ts-ignore
          updateUserStatus(data.data.userStatus);
          checkPendingStatus();
          if (redDotVisible) {
            logoutFail();
          }

          //@ts-ignore
          console.log("qqqqqq", data?.data?.lpnData !== []);
          //LPN modal
          //@ts-ignore
          if (data?.data?.lpnData === []) {
            setIsModalOpenLPN(true);
          }

          //@ts-ignore
          if (data?.data?.userStatus === "UNACTIVE") {
            //@ts-ignore
            setIsModalOpenDisabled(true);
          }
        }
      })
      .catch((error) => {
        console.error(error, "error");
      });
  }, []);

  return (
    <div>
      <HomeImg />
      {/* type =1 show announcements */}
      <HomeAnnouncements />
      {isLoggedIn && <HomeAnnouncements />}

      <Benefits />

      <Ballot />
      <HowToRegister />
      {/* Register License Plate Number Modal*/}
      <CustomModal
        width="60%"
        icon={AlertFill}
        title="Register License Plate Number"
        content={
          <>
            <div className="top-text" style={{ marginBottom: "32px" }}>
              You haven&apos;t started the License Plate Number Registration.
              Please begin the process.
            </div>
            <StyledTitle>
              To register License Plate Number, you will need to prepare
              including:
            </StyledTitle>
            <Card className="register-license" bordered={false} title="">
              <List
                split={false}
                style={StyledList}
                className="register-license-list"
              >
                <List.Item>
                  <StyledSpanDot className="dot">•</StyledSpanDot>Vehicle
                  Registration Document Upload
                </List.Item>
                <List.Item>
                  <StyledSpanDot className="dot">•</StyledSpanDot>DPP Permit if
                  applicable
                </List.Item>
                <List.Item>
                  <StyledSpanDot className="dot">•</StyledSpanDot>Authorization
                  Letter if applicable
                  <DownloadTemplate>
                    Download Authorization Letter Template
                  </DownloadTemplate>
                </List.Item>
              </List>
            </Card>
          </>
        }
        onOk={handleOnOk}
        onCancel={handleOnCancel}
        isModalOpen={isModalOpenLPN}
        btnLeftText="Register Later"
        btnRightText="Register Now"
      />

      {/* Account Disabled Modal */}
      <CustomModal
        width="40%"
        icon={AlertFill}
        title="Account Disabled"
        content={
          <div>
            Your account has been disabled by the admin. Please contact the
            admin with{" "}
            <span style={{ color: "#7a6145", textDecoration: "underline" }}>
              carparkbooking@airport.com
            </span>{" "}
            if you need assistance or support.
          </div>
        }
        onOk={handleOkDisabled}
        isModalOpen={isModalOpenDisabled}
        btnRightText="Understand"
        displayCancelBtnFooter="none"
      />
    </div>
  );
}
